<template>
    <div class="containar">
       <div class="nav_top"></div>
       <div class="nva_menu">
           <a href="#home">home</a>
           <a href="#about">about</a>
           <a href="#user">user</a>
       </div>
       <div class="content">           
           <component v-bind:is="currentPage"></component>

       </div>
    </div>
</template>

<script>
import Vue from 'vue';
//import home1 from './pages/home';

export default {
  name: 'app',
  data () {
    return {
      currentPage:''
    }
  },
  props:{url:String},
  watch:{
    'url':{
        handler:function(val,oldval){
            this.toPage(val);
        }
    }
  },
  methods:{
      toPage:function(url){
         // this.currentPage=this[page]();
         this.currentPage= function(){ 
             var context=require.context('./pages/' ,true,/\.vue$/);
             var keys=context.keys();
             if(keys.find(k=>k=='./' + url + '.vue')==undefined){
                url='404';
             }
             var page=import('./pages/' +url);
             return page;
         }
      },
      /*
      about:function(){
          return ()=> import('./about');
      },
      home:function(){
          return ()=> import('./home');
      }
      */
      
  }
}
</script>


<style lang="scss">
    body{
        padding: 0; 
        margin: 0;
    }
   .containar{ 
        position:fixed;
        width: 100%;
        height: 100%;
        background: #ccc;
        .nav_top{
            height: 50px; 
            overflow: hidden;
            background: #eee;
        }
        .nva_menu{
            position: fixed;
            top:50px; 
            bottom: 0px; 
            width: 200px;
            overflow: auto;
            background:rgb(104, 105, 104);
            &>a{
               display: inline-block;
               width: 100%;
               margin: 10px;
            }
        }
        .content{
            position: fixed;
            top:50px;
            left: 200px; 
            right: 0px; 
            bottom: 0px;
            overflow: auto; 
            background: white;
        }
   }   
</style>
